<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-08-14 09:55:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-02-23 14:36:01
 * @FilePath: \cxl-admin\src\pages\system\menu\list\Index.vue
-->
<template>
    <div class="page-box">
        <searchVue
            :list="data.searchList"
            @search="data.onSearch"
            @reset="data.onReset"
            ref="searchRef"
            v-permission="['*']"
        ></searchVue>
        <div class="add-menu" v-permission="['system:menu:add']">
            <el-button @click="data.openDialog('create', 1)">新增菜单</el-button>
        </div>
        <div class="table-container">
            <el-table
                :data="data.tableData"
                style="width: 100%; height: 100%"
                :border="true"
                row-key="id"
                :default-expand-all="false"
                :header-cell-style="{ background: '#f5f7fa' }"
            >
                <el-table-column prop="name" label="菜单名称" width="240"></el-table-column>
                <el-table-column prop="code" label="编码" width="240" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="sort" label="顺序" width="120"></el-table-column>
                <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="url" label="后端接口" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="status" label="状态" width="120">
                    <template #default="scope">
                        <el-switch
                            v-permission="['system:menu:enable', 'system:permission:enable']"
                            v-model="scope.row.status"
                            inline-prompt
                            active-text="启用"
                            inactive-text="禁用"
                            @change="data.onMenuStatusChange(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作" width="180">
                    <template #default="scope">
                        <span
                            class="custom-button create"
                            v-permission="['system:menu:add', 'system:permission:add']"
                            @click="data.openDialog('create', 2, scope.row)"
                            v-if="scope.row.type !== 2"
                            >新增</span
                        >
                        <span
                            class="custom-button"
                            v-permission="['system:menu:edit', 'system:permission:edit']"
                            @click="data.openDialog('edit', 2, scope.row)"
                            >编辑</span
                        >
                        <span
                            class="custom-button delete"
                            v-if="!scope.row.status"
                            v-permission="['system:menu:delete', 'system:permission:delete']"
                            @click="data.onDeleteMenu(scope.row)"
                            >删除</span
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <MenuDialog :data="data.dialog" @hidden="data.onDialogClose()" />
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import searchVue from '@/components/search/Index.vue'
import MenuDialog from '../menuDialog/Index.vue'
import { Menu } from '.'

/**
 * 初始化数据
 */
const data = reactive(new Menu())
</script>

<style scoped lang="scss">
.add-menu {
    margin-top: 0px;
}
.table-container {
    margin-top: 16px;
    height: calc(100% - 32px - 32px);
}
</style>
